<template>
    <svg aria-hidden="true">
        <use :xlink:href="symbolId" :class="fillClass" :fill="color"></use>
    </svg>
</template>

<script setup>
import { computed } from "vue-demi"

const props = defineProps({
    //显示的svg
    name: {
        type: String,
        required: true
    },
    // svg 图标颜色
    color: {
        type: String
    },
    // tailwind 指定 svg 颜色的类名
    fillClass: {
        type: String
    }
})

// 真实显示的svg图标
const symbolId = computed(() => {
    return `#icon-${props.name}`
})
</script>

<style>

</style>